<template>
  <el-dialog title="复用测评票" :close-on-click-modal="false" :visible.sync="visible" width="800px">
    <el-form :model="dataForm" class="formStyle" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
             label-width="160px">
      <el-form-item label="测评票名称" prop="cppName">
        <el-input style="width:90%" v-model="dataForm.cppName" placeholder="请输入测评票名称"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="mark">
        <el-input style="width:90%" v-model="dataForm.mark" placeholder="请输入备注"></el-input>
      </el-form-item>
<!--      <el-form-item label="测评票标题" prop="title">-->
<!--        <el-input style="width:90%" v-model="dataForm.title" placeholder=""></el-input>-->
<!--      </el-form-item>-->
      <el-form-item label="测评票类型" prop="sheetType">
        <el-select v-model="dataForm.sheetType" placeholder="请选择测评票类型" style="width:90%"  @change="selectSheetTypeChange">
          <el-option
            v-for="item in sheetTypeDic"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="表单单位名称" prop="sheetDept">
        <el-input style="width:90%" v-model="dataForm.sheetDept" placeholder="表单单位名称"></el-input>
      </el-form-item>
      <!-- <el-form-item label="表单日期" prop="sheetDate">
        <el-date-picker
          v-model="dataForm.sheetDate"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="表单日期">
        </el-date-picker>
      </el-form-item> -->
<!--      <el-form-item label="选择测评项" prop="xmxxName" v-if="sheetVisible">-->
<!--        <el-select v-model="dataForm.xmxxName" placeholder="请选择选择测评项" @change="pfxChange" @visible-change="cshPfx"-->
<!--                   style='width:90%;'>-->
<!--          <el-option v-for="item in options.pfx" :key="item.id" :label="item.xmName" :value="item.xmName">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--        &lt;!&ndash; <el-button type="primary" plain @click="obtainPfx()" class="marginLeft">获取最新评分项</el-button> &ndash;&gt;-->
<!--      </el-form-item>-->
      <el-form-item label="选择测评规则" prop="gzxxName" v-if="!sheetVisible4">
        <el-select v-model="dataForm.ruleName" placeholder="请选择选择测评规则" @change="pfgzChange" @visible-change="cshPfgz"
                   style='width:90%;'>
          <el-option v-for="item in options.pfgz" :key="item.id" :label="item.ruleName" :value="item.ruleName">
          </el-option>
        </el-select>
<!--         <el-button type="primary" plain @click="obtainPfgz()" class="marginLeft">获取最新评分规则</el-button> -->
      </el-form-item>
      <el-form-item label="选择测评关系" prop="cpgzName">
        <el-select v-model="dataForm.cpgzName" placeholder="请选择选择测评关系" @change="cpgzChange" @visible-change="cshCpgz"
                   style='width:90%;'>
          <el-option v-for="item in options.cpgz" :key="item.id" :label="item.gzName" :value="item.gzName">
          </el-option>
        </el-select>
        <!-- <el-button type="primary" plain @click="obtaincpgz()" class="marginLeft">获取最新测评规则</el-button> -->
      </el-form-item>
      <el-form-item label="评议对象信息" prop="colShowAll">
        <el-select v-model="dataForm.colShowAll" multiple placeholder="请选择评议对象信息" style="width:90%"  @change="selectChange">
          <el-option
            v-for="(item,index) in dic"
            :key="index"
            :label="item.label"
            :value="item.prop">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="可推荐人数" prop="recommendNum" v-if="sheetVisible4">
        <el-input-number style="width:90%" v-model="dataForm.recommendNum" :step="1" placeholder="可推荐人数"></el-input-number>
      </el-form-item>
      <el-form-item label="备注说明" prop="footerText">
        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 10}" size="medium" style="width:90%" v-model="dataForm.footerText" placeholder="备注说明"></el-input>
      </el-form-item>
<!--      <el-form-item label="测评等级权重" prop="djxxDjqz" v-if="dataForm.djxxName != ''">-->
<!--        <el-input-number v-model="dataForm.djxxDjqz" :precision="2" :step="1"   :min="0" style="width:200px"></el-input-number>-->
<!--      </el-form-item>-->
    </el-form>
    <span slot="footer" class="dialog-footer">
      
      <el-button type="primary" @click="dataFormSubmit()" v-if="canSubmit">确定</el-button>
      <el-button type="primary" plain @click="visible = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
/*!
 * 绩效考核-测评票管理编辑
 *
 * @author zmk
 * @date 2021-06-22 09:11:35
 */
import {
  // getObj,
  // addObj,
  // putObj,
  // selPfgzList,
  selCpgzList,
  // selCpdjList,
  selCppzbList,
  copy
} from '@/api/ceping/cepingcpppypzb'
import {
  selPfgzList,
} from '@/api/ceping/jxevalrule'
import {
  getObj,
  addObj,
  putObj,
  getUserColumns
} from '@/api/ceping/jxevalsheet'
import {getXmTree} from '@/api/ceping/cepingxmmxb'
import {querySubRuleByPid} from '@/api/ceping/cepinggzmxb'
import {querySubRuleByDjId} from '@/api/ceping/cepingdjmxb'
import {getBcpmxb} from '@/api/ceping/cepingcpgzbcpmxb'
import {getCepingMx} from '@/api/ceping/cepingcpgzcpmxb'

export default {
  data() {
    return {
      options: {
        pfx: [],
        pfgz: [],
        cpgz: [],
        cpdj: []
      },
      visible: false,
      canSubmit: false,
      dataForm: {
        id: 0,
        cppName: '',
        xmxxName: '',
        xmxxConfig: '',
        xmxxXmmx: '',
        gzxxName: '',
        gzxxConfig: '',
        gzxxGzmx: '',
        cpgzName: '',
        cpgzBpfdx: '',
        cpgzConfig: '',
        cpgzBcpmxb: '',
        cpgzCpmxb: '',
        cpgzCpmxbCppz: '',
        djxxName: '',
        djxxConfig: '',
        djxxDjmx: '',
        djxxDjqz: 0,
        xmZt: '',
        hostConfigJson:'',
        sheetType:'',
        footerText:'',
        title:'',
        sheetDept:'',
        sheetDate:'',
        recommendNum:1,
        ruleName:'',
        ruleDetailJson:'',
        mark:''
      },
      dataRule: {
        cppName: [
          {required: true, message: '测评票名称不能为空', trigger: 'blur'},
          {min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur'}
        ],
        mark: [
          // {required: true, message: '备注不能为空', trigger: 'blur'},
          {min: 0, max: 20, message: '长度在 0 到 20 个字符', trigger: 'blur'}
        ],
        footerText: [
          {min: 0, max: 300, message: '长度在 0 到 300 个字符', trigger: 'blur'}
        ],
        // xmxxName: [
        //   {required: true, message: '测评项不能为空', trigger: 'blur'}
        // ],
        ruleName: [
          {required: true, message: '测评规则不能为空', trigger: 'blur'}
        ],
        cpgzName: [
          {required: true, message: '测评关系不能为空', trigger: 'blur'}
        ],
        djxxDjqz: [
          {required: true, message: '测评等级权重不能为空', trigger: 'blur'},
          {
            validator: function (rule, value, callback) {
              if (value) {
                var tip = "";
                if (value * 1 < 0 || value * 1 > 50) {
                  tip = "测评等级权重应在0-50之间"
                }
                if (tip) {
                  callback(new Error(tip));
                } else {
                  callback();
                }
              } else {
                callback();
              }
            }, trigger: "blur"
          }
        ],
        colShowAll: [{required:true,message:"请选择显示列",trigger:"blur"}],
        sheetType: [{required:true,message:"请选择表单类型",trigger:"blur"}],
        title: [
          {required: false, message: '测评票标题不能为空', trigger: 'blur'},
          {min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur'}
        ],
        sheetDept: [
          {required: true, message: '表单单位名称不能为空', trigger: 'blur'},
          {min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur'}
        ],
        sheetDate:[{required: true, message: '表单日期不能为空', trigger: 'blur'}]
      },
      dic:[],
      selectValue:[],
      sheetTypeDic:[
        {label:"评议类模板",value:"3"},
        {label:"推荐类模板",value:"4"},
        {label:"调研类模板",value:"5"}
      ],
      sheetVisible:true,
      sheetVisible4:false
    }
  },
  created() {
    this.asyncColumnData()
  },
  methods: {
    //获取人员动态列数据
    asyncColumnData(){
      getUserColumns().then(res => {
        res.data.data.forEach(element => {
          this.dic.push({label:element.label,prop:element.prop});
        })
      }).catch(() => {
      });
    },
    //触发登记下拉
    cshCpdj(bz) {
      if (bz) {
        this.dataForm.djxxName = "";
        this.dataForm.djxxConfig = "";
        this.dataForm.djxxDjmx = "";
        this.dataForm.djxxDjqz = 0;
      }
    },
    //触发规则下拉
    cshCpgz(bz) {
      if (bz) {
        this.dataForm.cpgzName = "";
        this.dataForm.cpgzBpfdx = "";
        this.dataForm.cpgzConfig = "";
        this.dataForm.cpgzBcpmxb = "";
        this.dataForm.cpgzCpmxb = "";
        this.dataForm.cpgzCpmxbCppz = "";
      }
    },
    //触发规则下拉获取
    cshPfgz(bz) {
      if (bz) {
        this.dataForm.ruleName = "";
        this.dataForm.gzxxConfig = "";
        this.dataForm.gzxxGzmx = "";
      }
    },
    //触发项下拉获取
    cshPfx(bz) {
      if (bz) {
        this.dataForm.xmxxName = "";
        this.dataForm.xmxxConfig = "";
        this.dataForm.xmxxXmmx = "";
      }
    },
    //评分项选择后触发事件
    // pfxChange(name) {
    //   var obj = this.options.pfx.find((item) => {
    //     return item.xmName === name;
    //   });
    //   this.dataForm.xmxxConfig = JSON.stringify(obj);
    //   getXmTree(obj.id).then(response => {
    //     this.dataForm.xmxxXmmx = JSON.stringify(response.data.data);
    //   })
    // },
    //评分规则选择后触发事件
    pfgzChange(name) {
      var obj = this.options.pfgz.find((item) => {
        return item.ruleName === name;
      });
     //console.log('obj',obj)
      this.dataForm.ruleDetailJson = obj.genJson;
      this.dataForm.gzxxConfig = JSON.stringify(obj);
      // querySubRuleByPid(obj.id).then(response => {
      //   this.dataForm.gzxxGzmx = JSON.stringify(response.data.data);
      // })
    },
    //测评规则选择后触发事件
    cpgzChange(name) {
      var obj = this.options.cpgz.find((item) => {
        return item.gzName === name;
      });
      this.dataForm.cpgzConfig = JSON.stringify(obj);
      if(obj.gzBpfdx == '部门'){
        this.dataForm.cpgzBpfdx = '部门';
      }else if(obj.gzBpfdx == '个人'){
        this.dataForm.cpgzBpfdx = '个人';
      }else{
        this.dataForm.cpgzBpfdx = obj.gzBpfdx;
      }
      selCppzbList(obj.id).then(response => {
        this.dataForm.cpgzCpmxbCppz = JSON.stringify(response.data.data);
      });
      getCepingMx(obj.id).then(response => {
        this.dataForm.cpgzCpmxb = JSON.stringify(response.data.data);
      });
      getBcpmxb(obj.id).then(response => {
        this.dataForm.cpgzBcpmxb = JSON.stringify(response.data.data);
      });
    },
    //测评登记下拉
    // obtainCpdj() {
    //   selCpdjList().then(response => {
    //     this.options.cpdj = response.data.data;
    //     // this.dataForm.djxxName = "";
    //     // this.dataForm.djxxConfig = "";
    //     // this.dataForm.djxxDjmx = "";
    //   })
    // },
    //测评规则下拉
    obtaincpgz() {
      selCpgzList().then(response => {
        this.options.cpgz = response.data.data;
        // this.dataForm.cpgzName = "";
        // this.dataForm.cpgzBpfdx = "";
        // this.dataForm.cpgzConfig = "";
        // this.dataForm.cpgzBcpmxb = "";
        // this.dataForm.cpgzCpmxb = "";
        // this.dataForm.cpgzCpmxbCppz = "";
      })
    },
    //评分规则下拉获取
    obtainPfgz(sheetType) {
      selPfgzList(sheetType).then(response => {
        this.options.pfgz = response.data.data;
        // this.dataForm.gzxxName = "";
        // this.dataForm.gzxxConfig = "";
        // this.dataForm.gzxxGzmx = "";
      })
    },
    //评分项下拉获取
    // obtainPfx() {
    //   selPfxList().then(response => {
    //     this.options.pfx = response.data.data;
    //     // this.dataForm.xmxxName = "";
    //     // this.dataForm.xmxxConfig = "";
    //     // this.dataForm.xmxxXmmx = "";
    //   })
    // },
    //数据初始化
    initialization() {
      this.options = {
        pfx: [],
        pfgz: [],
        cpgz: [],
        cpdj: []
      };

      // this.obtainPfx();
      this.obtainPfgz("0");
      this.obtaincpgz();
      // this.obtainCpdj();

      this.dataForm = {
        id: 0,
        cppName: '',
        xmxxName: '',
        xmxxConfig: '',
        xmxxXmmx: '',
        gzxxName: '',
        gzxxConfig: '',
        gzxxGzmx: '',
        cpgzName: '',
        cpgzBpfdx: '',
        cpgzConfig: '',
        cpgzBcpmxb: '',
        cpgzCpmxb: '',
        cpgzCpmxbCppz: '',
        djxxName: '',
        djxxConfig: '',
        djxxDjmx: '',
        djxxDjqz: 0,
        xmZt: '',
        hostConfigJson:'',
        sheetType:'',
        footerText:'',
        title:'',
        sheetDept:'',
        sheetDate:'',
        recommendNum:1,
        ruleName:'',
        ruleDetailJson:'',
        mark:''
      };
      this.sheetTypeDic = [
        {label:"评议类模板",value:"3"},
        {label:"推荐类模板",value:"4"},
        {label:"调研类模板",value:"5"}
      ];
    },
    init(id) {
      this.initialization();
      this.dataForm.id = id || 0;
      this.visible = true;
      this.canSubmit = true;
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          getObj(this.dataForm.id).then(response => {
            this.dataForm = response.data.data
            let tempArr = JSON.parse(this.dataForm.hostConfigJson);
            this.dataForm.colShowAll = [];
            for (var i = 0; i < tempArr.length; i++) {
              this.dataForm.colShowAll.push(tempArr[i].prop);
              this.selectValue.push(tempArr[i]);
            }
            this.selectValue = this.unique(this.selectValue);
            if(this.dataForm.sheetType == '4'){
              this.sheetVisible = false;
              this.sheetVisible4 = true;
            }else{
              this.sheetVisible = true;
              this.sheetVisible4 = false;
            }
          })
        }
      })
    },
    // 表单提交
    dataFormSubmit() {
      this.dataForm.colShowAll = this.selectValue;
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if(this.dataForm.sheetType != '4'){
            ////console.log('this.dataForm',this.dataForm)
            if(this.dataForm.ruleDetailJson == '' || typeof(this.dataForm.ruleDetailJson) == 'undefined' || this.dataForm.ruleDetailJson == null || this.dataForm.ruleDetailJson == 'null'){
              this.$notify.closeAll();
              this.$notify.error({
                // title: '错误',
                message: "测评规则："+ this.dataForm.ruleName + '没有配置选项答案，请在测评规则中完善配置',
                showClose: true,
                duration: 5000
              })
              return;
            }
          }
          this.canSubmit = false;
          this.dataForm.hostConfigJson = JSON.stringify(this.selectValue);
          if (this.dataForm.id) {
            copy(this.dataForm).then(data => {
              this.$notify.success('复用成功')
              this.visible = false
              this.$emit('refreshDataList')
            }).catch(() => {
              this.canSubmit = true;
            });
          }
        }
      })
    },
    selectChange(params){
      this.$forceUpdate();
      for (var i = 0; i < params.length; i++) {
        let p = {};
        p.label = params[i] ? this.dic.find(ele => ele.prop === params[i]).label: '';
        p.prop = params[i];
        this.selectValue.push(p);
      }
      this.selectValue = this.unique(this.selectValue);
     //console.log('this.selectValue',this.selectValue)
    },
    selectSheetTypeChange(params){
      if(params == '4'){
        this.sheetVisible = false;
        this.sheetVisible4 = true;
      }else{
        this.sheetVisible = true;
        this.sheetVisible4 = false;
      }
      this.obtainPfgz(params)
    },
    //数组去重
    unique(arr){
      for(var i=0; i<arr.length; i++){
        for(var j=i+1; j<arr.length; j++){
          if(arr[i].prop==arr[j].prop){         //第一个等同于第二个，splice方法删除第二个
            arr.splice(j,1);
            j--;
          }
        }
      }
      return arr;
    },
  }
}
</script>
<style>

</style>
